<template>
  <div class="apply-container">
    <!-- 顶部筛选栏 -->
    <div class="apply-top">
      <van-dropdown-menu active-color="#1768EF" class="dropdown-menu">
        <van-dropdown-item 
          v-model="value1" 
          :options="option1" 
          :title="title1" 
          @change="change1" 
        />
        <van-dropdown-item 
          v-model="value2" 
          :options="option2" 
          :title="title2" 
          @change="change2"
        />
      </van-dropdown-menu>
      
      <van-field
        v-model="value3"
        readonly
        clickable
        label="提交时间"
        :value="value3"
        @click="showDatePicker = true"
      />
    </div>

    <!-- 列表内容 -->
    <div class="case-list">
      <template v-if="list.length">
        <div 
          v-for="(item, index) in list" 
          :key="index"
          class="apply-item"
          @click="goDetailTap(item)"
        >
          <div class="apply-header">
            <div class="left">
              <span class="type-name">{{ getTypeName(item.businessType) }}</span>
              <van-tag 
                :type="getStatusType(item.status)"
                class="status-tag"
              >
                {{ getStatusText(item.status) }}
              </van-tag>
            </div>
            <span class="date">{{ item.startTime }}</span>
          </div>
        </div>
      </template>

      <!-- 加载状态 -->
      <van-empty v-if="total === 0" description="暂无数据" />
      <div v-else class="bottom-tip">
        <van-loading v-if="isLoading" size="24px">加载中...</van-loading>
        <span v-else-if="total > 10 && list.length === total">到底了~</span>
      </div>
    </div>

    <!-- 回到顶部 -->
    <van-back-top 
      v-show="!showTop" 
      right="20" 
      bottom="20"
    />

    <!-- 日期选择器 -->
    <van-calendar
      v-model="showDatePicker"
      @confirm="onDateConfirm"
      @cancel="onDateCancel"
    />
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'ApplyList',

  data() {
    return {
      isUp: false,
      list: [],
      total: null,
      isLoading: true,
      showTop: true,
      hasNextPage: true,
      pageNum: 1,
      showDatePicker: false,
      
      title1: '审核状态',
      value1: '',
      title2: '审批类型',
      value2: '',
      value3: '',

      option1: [
        { text: '全部', value: '' },
        { text: '待审批', value: '1' },
        { text: '已通过', value: '2' },
        { text: '已驳回', value: '3' }
      ],

      option2: [
        { text: '全部', value: '' },
        { text: '食堂采购', value: 't_purchase_apply' },
        // ... 其他选项
      ]
    }
  },

  computed: {
    // 计算属性处理类型名称和状态显示
  },

  created() {
    this.initData()
  },

  methods: {
    initData() {
      this.pageNum = 1
      this.list = []
      this.getAllList()
    },

    // 日期选择器相关方法
    onDateConfirm(date) {
      this.value3 = this.formatDate(date)
      this.showDatePicker = false
      this.initData()
    },

    onDateCancel() {
      this.value3 = ''
      this.showDatePicker = false
      this.initData()
    },

    // 其他方法保持不变，只需将 uni API 替换为对应的 Web API
  }
}
</script>
<style lang="scss" scoped>
.apply-container {
  min-height: 100vh;
  padding: 10px 0;
  background: #f5f5f5;

  .apply-top {
    margin: 0 0 10px;
    height: 40px;
    display: flex;
    align-items: center;
    background: #fff;
  }

  .dropdown-menu {
    width: 66%;
    :deep(.van-dropdown-menu__item) {
      height: 40px !important;
      box-shadow: none !important;
    }
  }

  // ... 其他样式
}
</style>